@keyframes small-planet {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    45% {
        -webkit-transform: scale(0.7);
        -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
        -o-transform: scale(0.7);
        transform: scale(0.7);
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
h1{
    margin:0;
}
body{
    opacity: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
body.show{
    opacity: 1;
}
div#bgLoop{
    height:100%;
    width:100%;
    background-color:rgb(19,33,41);
    position: relative;
}
/*div#bgLoop>canvas{
    height:100%;
    width:100%;
}*/
div.main{
    position: relative;
}
div.background.active{
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
div.background>canvas{
    width:100%;
    height:100%;
}
div.background>.small-planet{
    background: url("../img/small_planet.png") no-repeat;
    background-size: 100%;
    width:4rem;
    height:3rem;
    position: absolute;
    right:0.5rem;
    bottom:10rem;
    animation: small-planet ease-in-out 3s;
    animation-iteration-count:infinite;
}
div.background{
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -ms-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
    display: block;
    position: fixed;
    height:100%;
    width:100%;
    background: url("../img/back.png");
    background-size: 100%;
    top:0;
    /*overflow: hidden;*/
}
div#percent{
    position: absolute;
    bottom:2rem;
    height:2rem;
    width:100%;
    text-align: center;
    color:#ffffff;
    font-size: 1.5rem;
}
div.main-page h1{
    font-size: 0;
    padding-top: 6.3rem;
    width:12rem;
    background: url("../img/logo.png") no-repeat;
    background-size: 100%;
    display: block;
    margin:0 auto 3rem auto;
}
div.main-page div{
    margin-bottom: 5rem;
}
div.main-page{
    left:-6rem;
    height:20rem;
    width:12rem;
    position: absolute;
    bottom:19rem;
    transform-origin: 6rem 39rem;
    -webkit-transform-origin: 6rem 39rem;
    -webkit-transform: rotateZ(0);
    -moz-transform: rotateZ(0);
    -ms-transform: rotateZ(0);
    -o-transform: rotateZ(0);
    transform: rotateZ(0);
    background-color: rgba(0,0,0,0);
}
div.main-page button{
    width:11rem;
    height: 2.2rem;
    border:1px rgba(255,255,255,0.7) solid;
    border-radius: 0.4rem;
    color:#FFF;
    font-size: 1rem;
    background-color: #387A81;
    display: block;
    margin:1rem auto;
}
div.main-page button:focus{
    background-color: #AAAAAA;
}

div.planet-animals div.animal{
    width:8rem;
    height:14rem;
    transform-origin: 4rem 33rem;
    -webkit-transform-origin: 4rem 33rem;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    left:-4rem;
    background-repeat: no-repeat;
}

div.planet-animals>div.design{
    background-image: url("../img/Design.png");
    background-size: 100%;
    position: absolute;
    bottom:19rem;
    -webkit-transform: rotateZ(80deg);
    -moz-transform: rotateZ(80deg);
    -ms-transform: rotateZ(80deg);
    -o-transform: rotateZ(80deg);
    transform: rotateZ(80deg);
}
div.planet-animals>div.game{
    background-image: url("../img/game.png");
    background-size: 100%;
    position: absolute;
    bottom:18rem;
    transform-origin: 4rem 32rem;
    -webkit-transform-origin: 4rem 32rem;
    -webkit-transform: rotateZ(120deg);
    -moz-transform: rotateZ(120deg);
    -ms-transform: rotateZ(120deg);
    -o-transform: rotateZ(120deg);
    transform: rotateZ(120deg);
}
div.planet-animals>div.pm{
    background-image: url("../img/pm.png");
    background-size: 100%;
    position: absolute;
    height:13rem;
    bottom:18rem;
    transform-origin: 4rem 31rem;
    -webkit-transform-origin: 4rem 31rem;
    -webkit-transform: rotateZ(160deg);
    -moz-transform: rotateZ(160deg);
    -ms-transform: rotateZ(160deg);
    -o-transform: rotateZ(160deg);
    transform: rotateZ(160deg);
}
div.planet-animals>div.lab{
    background-image: url("../img/lab.png");
    background-size: 100%;
    position: absolute;
    bottom:19rem;
    -webkit-transform: rotateZ(200deg);
    -moz-transform: rotateZ(200deg);
    -ms-transform: rotateZ(200deg);
    -o-transform: rotateZ(200deg);
    transform: rotateZ(200deg);
}
div.planet-animals>div.android{
    background-image: url("../img/android.png");
    background-size: 100%;
    position: absolute;
    bottom:19rem;
    -webkit-transform: rotateZ(240deg);
    -moz-transform: rotateZ(240deg);
    -ms-transform: rotateZ(240deg);
    -o-transform: rotateZ(240deg);
    transform: rotateZ(240deg);
}

div.planet-animals>div.iOS{
    background-image: url("../img/iOS.png");
    background-size: 100%;
    position: absolute;
    bottom:19rem;
    -webkit-transform: rotateZ(280deg);
    -moz-transform: rotateZ(280deg);
    -ms-transform: rotateZ(280deg);
    -o-transform: rotateZ(280deg);
    transform: rotateZ(280deg);
}
div.planet-animals>div.web{
    background-image: url("../img/web.png");
    background-size: 100%;
    position: absolute;
    transform-origin: 4rem 32rem;
    -webkit-transform-origin: 4rem 32rem;
    bottom:18rem;
    -webkit-transform: rotateZ(40deg);
    -moz-transform: rotateZ(40deg);
    -ms-transform: rotateZ(40deg);
    -o-transform: rotateZ(40deg);
    transform: rotateZ(40deg);
}
div.planet-animals>div.hr{
    background-size: 100%;
    position: absolute;
    height:25rem;
    width:17rem;
    left:-8.5rem;
    transform-origin: 8.5rem 43rem;
    -webkit-transform-origin: 8.5rem 43rem;
    bottom:18rem;
    -webkit-transform: rotateZ(320deg);
    -moz-transform: rotateZ(320deg);
    -ms-transform: rotateZ(320deg);
    -o-transform: rotateZ(320deg);
    transform: rotateZ(320deg);
}
div.planet-animals.init{
    -webkit-transform: translateY(15rem);
    -moz-transform: translateY(15rem);
    -ms-transform: translateY(15rem);
    -o-transform: translateY(15rem);
    transform: translateY(15rem);
}
div.planet-animals.active{
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
div.planet-animals{
    position: fixed;
    bottom:-15rem;
    width:1px;
    height:1px;
    left:0;
    right:0;
    margin:0 auto;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
div.planet-animals>div.planet{
    background: url("../img/planet.png") no-repeat;
    background-size: 100%;
    width:40rem;
    height:42rem;
    position: absolute;
    top: -21rem;
    left:-20rem;
    margin:0 auto;
    transform: rotateZ(-15deg);
}
div.slide{
    width:100%;
}
div.text{
    width:100%;
    height:5rem;
    position: fixed;
    top:0;
}
div.animation{
    position: relative;
}
div.animation.hide{
    -webkit-transform: translateY(-20rem);
    -moz-transform: translateY(-20rem);
    -ms-transform: translateY(-20rem);
    -o-transform: translateY(-20rem);
    transform: translateY(-20rem);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
/*web*/
div.animation>div.web>div{
    width:100%;
    height:100%;
    background: url("../img/text/web.png");
    -webkit-background-size:100% auto;
    background-size:100% auto;
}
div.animation>div.web{
    opacity: 1;
    padding:2rem 2rem 2rem 5rem;
    -webkit-transition: opacity 0.5s 1.5s;
    -moz-transition: opacity 0.5s 1.5s;
    -ms-transition: opacity 0.5s 1.5s;
    -o-transition: opacity 0.5s 1.5s;
    transition: opacity 0.5s 1.5s;
}
/*design*/
div.animation>div.design>div{
    width:100%;
    height:100%;
    background: url("../img/text/Design.png");
    -webkit-background-size:100% auto;
    background-size:100% auto;
}
div.animation>div.design{
    opacity: 1;
    padding:2rem 2rem 2rem 5rem;
    -webkit-transition: opacity 0.5s 1.5s;
    -moz-transition: opacity 0.5s 1.5s;
    -ms-transition: opacity 0.5s 1.5s;
    -o-transition: opacity 0.5s 1.5s;
    transition: opacity 0.5s 1.5s;
}
/*game*/
div.animation>div.game>div{
    width:100%;
    height:100%;
    background: url("../img/text/Game.png");
    -webkit-background-size:100% auto;
    background-size:100% auto;
}
div.animation>div.game{
    opacity: 1;
    padding:2rem 2rem 2rem 5rem;
    -webkit-transition: opacity 0.5s 1.5s;
    -moz-transition: opacity 0.5s 1.5s;
    -ms-transition: opacity 0.5s 1.5s;
    -o-transition: opacity 0.5s 1.5s;
    transition: opacity 0.5s 1.5s;
}
/*pm*/
div.animation>div.pm>div{
    width:100%;
    height:100%;
    background: url("../img/text/PM.png");
    -webkit-background-size:100% auto;
    background-size:100% auto;
}
div.animation>div.pm{
    opacity: 1;
    padding:2rem 2rem 2rem 5rem;
    -webkit-transition: opacity 0.5s 1.5s;
    -moz-transition: opacity 0.5s 1.5s;
    -ms-transition: opacity 0.5s 1.5s;
    -o-transition: opacity 0.5s 1.5s;
    transition: opacity 0.5s 1.5s;
}
/*lab*/
div.animation>div.lab>div{
    width:100%;
    height:100%;
    background: url("../img/text/Lab.png");
    -webkit-background-size:100% auto;
    background-size:100% auto;
}
div.animation>div.lab{
    opacity: 1;
    padding:2rem 2rem 2rem 5rem;
    -webkit-transition: opacity 0.5s 1.5s;
    -moz-transition: opacity 0.5s 1.5s;
    -ms-transition: opacity 0.5s 1.5s;
    -o-transition: opacity 0.5s 1.5s;
    transition: opacity 0.5s 1.5s;
}
/*android*/
div.animation>div.android>div{
    width:100%;
    height:100%;
    background: url("../img/text/Android.png");
    -webkit-background-size:100% auto;
    background-size:100% auto;
}
div.animation>div.android{
    opacity: 1;
    padding:2rem 2rem 2rem 5rem;
    -webkit-transition: opacity 0.5s 1.5s;
    -moz-transition: opacity 0.5s 1.5s;
    -ms-transition: opacity 0.5s 1.5s;
    -o-transition: opacity 0.5s 1.5s;
    transition: opacity 0.5s 1.5s;
}

/*ios*/
div.animation>div.ios>div{
    width:100%;
    height:100%;
    background: url("../img/text/ios.png");
    -webkit-background-size:100% auto;
    background-size:100% auto;
}
div.animation>div.ios{
    opacity: 1;
    padding:2rem 2rem 2rem 5rem;

    -webkit-transition: opacity 0.5s 1.5s;
    -moz-transition: opacity 0.5s 1.5s;
    -ms-transition: opacity 0.5s 1.5s;
    -o-transition: opacity 0.5s 1.5s;
    transition: opacity 0.5s 1.5s;
}

div.animation>div.undefined{
    opacity: 0;
}
div.animation>div{
    width:100%;
    height:100%;
    padding:4rem 2rem 2rem 2rem;
    box-sizing: border-box;
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s ;
    -ms-transition: opacity 0.5s ;
    -o-transition: opacity 0.5s ;
    transition: opacity 0.5s;
}
div.planet-animals>div.hr>h1{
    height:3rem;
    text-align: center;
    color:#FFF;

}
div.planet-animals>div.hr>img{
    width:100%;
    height:auto;
    margin-top: 1rem;
}
div.planet-animals>div.hr>div{
    border:2px #AAAAAA solid;
    width:100%;
    height:calc(100% - 9rem);
    padding:1rem;
    box-sizing: border-box;
    margin-bottom: 6rem;;
}
div.planet-animals>div.hr>div>p{
    font-size: 0.8rem;
    color:#FFF;
}